<template>
    <div class="detilBox">
        <div class="head">
            <div class="imgBox">
                <img src="" alt="">
            </div>
            <p>
                微志益
            </p>
        </div>
        <div class="content">
            <div class="center" v-if="this.IndexData">
                <h3>{{this.IndexData.name}}</h3>
                <div class="time">{{this.IndexData.time}}</div>
                <div class="nrBox">
                    <div class="imgBox" v-if="this.IndexData.img">
                        <img :src="this.IndexData.img" alt="">
                    </div>
                    <div class="txtBox">
                        <p>项目地点：
                            <span>{{this.IndexData.didian}}</span>
                        </p>
                        <p>志愿类别：
                            <span>{{this.IndexData.leibie}}</span>
                        </p>
                        <p>服务对象：
                            <span>{{this.IndexData.duixiang}}</span>
                        </p>
                        <p>项目日期：
                            <span class="stime">{{this.IndexData.time}}</span>
                        </p>
                        <p>招募日期：
                            <span class="stime">{{this.IndexData.zhaomu}}</span>
                        </p>
                        <p>发布日期：
                            <span>{{this.IndexData.time}}</span>
                        </p>
                        <p>详细志愿时间：
                            <span>{{this.IndexData.xxtime}}</span>
                        </p>
                        <p>
                            分享到：<i class="iconfont icon-icon-test"></i>
                        </p>
                    </div>
                </div>
                <div class="xq">
                    <p>项目详情</p>
                    {{this.IndexData.xq}}
                </div>
                <div class="btn">
                    我要报名
                </div>
                <div class="talk">
                    <p class="tit">讨论区 
                        <span>在这里畅所欲言吧~</span>
                    </p>
                    <div class="input">
                        <textarea value="我可以自动换行" placeholder="说两句吧~"></textarea>
                        <div class="fb">发布</div>
                    </div>
                    
                    <div class="nulltalk">
                        暂无评论，快来评论一下吧~
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="tj">
                    <p class="title">项目二维码</p>
                    <div class="ewm">
                        <div class="ewmBox">
                            <img src="/images/ewm1.png" alt="">
                        </div>
                        
                        <p>扫描二维码加入项目</p>
                    </div>
                    <div class="ewm">
                         <div class="ewmBox">
                            <img src="/images/ewm2.png" alt="">
                        </div>
                        <p>微信扫码打开分享</p>
                    </div>
                </div>
            </div>
        </div>
        <end></end>
    </div>
</template>
<script>
import {getProject} from '@/api/Project'

export default {
    data(){
        return{
            detailData:"",
            IndexData:""
        }
    },
    mounted(){
       getProject().then(res=>{
            this.detailData=res.data
        })
       getProject().then(res=>{
             //截取出id
            let id=this.$route.params.id.slice(3)
            this.IndexData=res.data.filter((item=>{
                 return item._id == id
             }))
             this.IndexData=this.IndexData[0]
        })      
    }
}
</script>
<style lang="scss" scoped>
    .head{
        width: 100%;
        height: 60px;
        border: 1px solid;
        display: flex;
        padding: 0 200px;
        box-sizing: border-box;
        background: #333;
        min-width: 1000px;
        position: fixed;
        top: 0;
        .imgBox{
            width: 45px;
            height: 45px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background: url('/images/image3.jpg');
            background-size: cover;
            background-position: -7px 2px;
            margin-top: 6px;
        }
        p{
            line-height: 60px;
            padding-left: 20px;
            color: green;
            font-size: 18px;
        }
    }

    .content{
        width: 1200px;
        border-top: 1px solid #c0c0c0;
        margin:100px auto;
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        .center{
            width: 740px;
            margin-left: 100px;
            h3{
                font-size: 25px;
                text-align: center;
            }
            .time{
                text-align: center;
                margin-top: 10px;
                color: #777;
                font-size: 15px;
            }
            .nrBox{
                width: 740px;
                border: 1px solid #eee;
                padding: 0 25px;
                box-sizing: border-box;
                display: flex;
                margin-top: 35px;
                justify-content: space-between;
                 .imgBox{
                    width: 180px;
                    height: 200px;
                    border: 1px solid #eee;
                    margin-top: 40px;
                    margin-bottom: 40px;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
                .txtBox{
                    width: 450px;
                    box-sizing: border-box;
                    padding-top: 20px;
                    p{
                        margin-top: 8px;
                        span{
                            font-size: 14px;
                            color: #777;
                        }
                        .stime{
                            color: green;
                        }
                        i{
                            font-size: 22px;
                            // color: green;
                            cursor: pointer;
                            line-height: 10px;
                        }
                        i:hover{
                            color: green;
                        }
                    }
                }
            }
            .xq{
                margin-top: 26px;
                border: 1px solid #eee;
                padding: 10px 20px;
                font-size: 14px;
                color: #333;
                p{
                    font-size: 18px;
                    color: #000;
                    padding-bottom: 10px;
                }
            }
            .btn{
                width: 200px;
                height: 50px;
                background: orange;
                color: #fff;
                text-align: center;
                line-height: 50px;
                margin: 30px auto;
                border-radius: 10px;
                cursor: pointer;
                transition: all .2s;
            }
            .btn:hover{
                transform: scale(1.02)
            }
            .talk{
                width: 600px;
                margin: 50px auto;
                border-bottom: 1px solid #c0c0c0;
                padding-bottom: 20px;
                .tit{
                    font-size: 24px;
                    span{
                        color: #777;
                        font-size: 14px;
                        padding-left: 10px;
                    }
                }
                .input{
                    width: 400px;
                    margin: auto;
                    textarea{
                        width: 400px;
                        height: 80px;
                        display: block;
                        margin: auto;
                        resize: none;
                        padding: 10px 20px;
                        color: #777;
                        margin-top: 10px;
                        box-sizing: border-box;
                    }
                    .fb{
                        float: right;
                        font-size: 14px;
                        cursor: pointer;
                        background: green;
                        padding: 2px 5px;
                        border-radius: 5px;
                        color: aliceblue;
                        margin-top: 10px;
                    }
                }
                .nulltalk{
                    margin-top: 80px;
                    // border: 1px solid;
                    text-align: center;
                    font-size: 14px;
                    color: #777;
                }
            }

        }
        .right{
            width: 360px;
            .tj{
                box-sizing: border-box;
                padding: 15px 20px;
                position: -webkit-sticky;
                position: sticky;
                top: 80px;
                z-index: -1;
                .title{
                    font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                }
                .ewm{
                    border-right:  1px solid #ccc;
                    margin-top: 16px;
                    .ewmBox{
                        width: 150px;
                        height: 150px;
                        margin: auto;
                        img{
                            width: 100%;
                        }
                    }
                    p{
                        text-align: center;
                        margin-top: 15px;
                    }
                }
            }
        }
    }
</style>